<template>
	<view class="admin-container">
		<!-- 顶部数据概览 -->
		<view class="data-overview">
			<view class="data-card">
				<view class="data-icon">💰</view>
				<view class="data-info">
					<view class="data-value">¥{{ totalRevenue }}</view>
					<view class="data-label">总营业额</view>
				</view>
			</view>
			<view class="data-card">
				<view class="data-icon">⏳</view>
				<view class="data-info">
					<view class="data-value">{{ pendingOrders }}</view>
					<view class="data-label">待处理订单</view>
				</view>
			</view>
		</view>
		
		<!-- 功能区域 -->
		<view class="function-area">
			<view class="section-title">管理功能</view>
			
			<!-- 主要功能卡片 -->
			<view class="function-grid">
				<!-- 用户管理 -->
				<view class="function-card" @click="navigateTo('/pages/admin/user-manage')">
					<view class="function-icon">👥</view>
					<view class="function-title">用户管理</view>
					<view class="function-desc">管理系统用户，查看用户信息</view>
					<view class="card-arrow">→</view>
				</view>
				
				<!-- 订单管理 -->
				<view class="function-card" @click="navigateTo('/pages/admin/order-manage')">
					<view class="function-icon">📋</view>
					<view class="function-title">订单管理</view>
					<view class="function-desc">处理客户订单，跟踪订单状态</view>
					<view class="card-arrow">→</view>
				</view>
				
				<!-- 案例管理 -->
				<view class="function-card" @click="navigateTo('/pages/admin/case-manage')">
					<view class="function-icon">🌟</view>
					<view class="function-title">案例管理</view>
					<view class="function-desc">管理展示案例，添加新案例</view>
					<view class="card-arrow">→</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'

// 数据统计
const totalRevenue = ref('0.00')
const pendingOrders = ref(0)

// 页面跳转
const navigateTo = (url) => {
	uni.navigateTo({ url })
}

// 获取数据概览
const fetchDashboardData = async () => {
	try {
		const res = await request('/admin/dashboard', { method: 'GET' })
		if (res.code === 200) {
			totalRevenue.value = res.data.totalRevenue || '0.00'
			pendingOrders.value = res.data.pendingOrders || 0
		}
	} catch (error) {
		console.error('获取数据概览失败', error)
	}
}

// 模拟数据（实际开发时可删除）
const mockData = () => {
	totalRevenue.value = '128,560.00'
	pendingOrders.value = 12
	
}

onMounted(() => {
	// 尝试获取真实数据，如果失败则使用模拟数据
	fetchDashboardData().catch(() => mockData())
})
</script>

<style lang="scss" scoped>
.admin-container {
	min-height: 100vh;
	padding: 30rpx;
	background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
	color: #fff;
}

// 顶部数据概览
.data-overview {
	display: flex;
	gap: 20rpx;
	margin-bottom: 40rpx;
}

.data-card {
	flex: 1;
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	border: 1px solid #2D1457;
}

.data-icon {
	font-size: 48rpx;
	margin-right: 20rpx;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.data-info {
	flex: 1;
}

.data-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #A259FF;
	margin-bottom: 6rpx;
}

.data-label {
	font-size: 24rpx;
	color: #B8B8D1;
}

// 功能区域
.function-area {
	margin-top: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #A259FF;
	margin-bottom: 20rpx;
	padding-left: 10rpx;
	border-left: 8rpx solid #A259FF;
}

// 功能卡片网格
.function-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20rpx;
	margin-bottom: 40rpx;
}

.function-card {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	position: relative;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	border: 1px solid #2D1457;
	transition: transform 0.2s;
}

.function-card:active {
	transform: scale(0.98);
}

.function-icon {
	font-size: 40rpx;
	margin-bottom: 16rpx;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.function-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 10rpx;
}

.function-desc {
	font-size: 26rpx;
	color: #B8B8D1;
	margin-bottom: 10rpx;
}

.card-arrow {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 36rpx;
	color: #A259FF;
}

// 响应式布局
@media screen and (min-width: 768px) {
	.function-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
</style>